<template>
  <a-card :shadow="false">
    <view class="grid-3">
      <view class="flex-column-center" @click="toPath('/cook/dayUpdate/dayUpdate')">
        <view class="icon">
          新
          <view></view>
        </view>
        <view class="u-f-sm l-30">每日上新</view>
      </view>
      <view class="flex-column-center" @click="toPath('/cook/share/share')">
        <view class="icon">
          享
          <view></view>
        </view>
        <view class="u-f-sm l-30">厨友分享</view>
      </view>
      <view class="flex-column-center" @click="toPath('/cook/MyCook/MyCook')">
        <view class="icon">
          厨
          <view></view>
        </view>
        <view class="u-f-sm l-30">我的厨房</view>
      </view>
    </view>
  </a-card>
</template>

<script lang="ts" setup>
import ACard from "@/components/a-card.vue";
import {toPath} from "@/util/router/router";
</script>

<style scoped lang="scss">
@import "~@/static/css/index.css";

@function random-dark-color() {
  $hue: random(360); // 随机色相 (0-360)
  $saturation: random(70) + 30%; // 饱和度在30%-100%之间
  $lightness: random(30) + 10%; // 明度在10%-40%之间（确保颜色较深）
  @return hsl($hue, $saturation, $lightness);
}

.icon {
  width: 60rpx;
  height: 60rpx;
  margin: 0 auto 10rpx;
  background: random-dark-color();
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28rpx;
  position: relative;

  & > view::after {
    content: "";
    position: absolute;
    top: 0;
    right: -10rpx;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(161, 143, 143, 0.2);
  }
}
</style>